<template>
  <div>
    <el-dialog
      customClass="role-dialog"
      :close-on-click-modal="false"
      title="基本信息"
      :visible.sync="dialogVisible"
      width="520px"
      @close="cancel"
    >
      <div class="form-box">
        <InfoComp ref="infoComp" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="save" type="primary"> 确认 </el-button>
        <el-button icon="el-icon-circle-close" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import InfoComp from "./common/info.vue";
import { roleDetail } from "@/api/role.js";
import Mixins from "./mixins";
export default {
  mixins: [Mixins],
  components: { InfoComp },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    show(obj) {
      this.dialogVisible = true;
      this.initInfo(obj.id);
    },
    initInfo(id) {
      let params = {
        id: id,
      };
      roleDetail(params).then((res) => {
        this.$refs.infoComp.show(res.data);
      });
    },
    save() {
      const p1 = new Promise((resolve) => {
        this.$refs["infoComp"].$refs["formDataRef"].validate((valid) => {
          if (valid) resolve();
        });
      });
      Promise.all([p1]).then(() => {
        const paramsInfo = this.$refs["infoComp"].form;
        this.getUpdateRole(paramsInfo).then(() => {
          this.cancel();
          this.$parent.initRole();
        });
      });
    },
    cancel() {
      this.$refs["infoComp"].reset();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.form-box-role {
  width: 100%;
  margin: 0 auto;
}
:deep(.form-box-role .el-form-item .el-select) {
  width: 100%;
}
:deep(.role-dialog .el-dialog__body) {
  min-height: auto !important;
}
</style>
